<template>
  <div>
    <el-breadcrumb separator="/">
    	<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    	<el-breadcrumb-item>系统管理</el-breadcrumb-item>
    	<el-breadcrumb-item>版本控制</el-breadcrumb-item>
    </el-breadcrumb>
	<el-card>
		<el-row>
			<el-col :span="6">
				<el-button type="primary" @click="showAdd">版本更新</el-button>
			</el-col>
		</el-row>
		<el-table :data="opinionList" border stripe>
			<el-table-column label="序号" prop="id"></el-table-column>
			<el-table-column label="终端" prop="systemCode"></el-table-column>
			<el-table-column label="版本号" prop="versionCode"></el-table-column>
			<el-table-column label="发布时间" prop="createTime"></el-table-column>
			<el-table-column label="更新类型">
				<template slot-scope="scope">
					{{scope.row.isForce ?'强制更新':'推荐更新'}}
				</template>
			</el-table-column>
			<el-table-column label="更新文案" prop="updateContent"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<!-- {{scope.row}} -->
					<el-switch
						v-model="scope.row.type"
						@change="typeChanged(scope.row,scope.row.id)"
						active-color="#13ce66"
						inactive-color="#ff4949"
						active-value="1"
						inactive-value="0"
						:disabled="!scope.row.isLatest"></el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button :disabled="!scope.row.isLatest" type="primary" icon="el-icon-edit" size="mini" @click="showEdit(scope.row.id)"></el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 分页 -->
		<el-pagination
		  @size-change="handleSizeChange"
		  @current-change="handleCurrentChange"
		  :current-page="pageCount"
		  :page-size="pageSize"
		  layout="total, sizes, prev, pager, next, jumper"
		  :total="total">
		</el-pagination>
		
		<el-dialog
		  title="版本更新"
		  :visible.sync="addDialogVisible"
		  width="60%">
			<el-form ref="addFormRef" :model="addForm" label-width="110px">
				<el-form-item label="终端类型">
					<el-radio v-model="addForm.systemCode" label="android">Android</el-radio>
					<el-radio v-model="addForm.systemCode" label="ios">IOS</el-radio>
				</el-form-item>
				<el-form-item label="版本号">
					<el-input v-model="addForm.versionCode"></el-input>
				</el-form-item>
				<el-form-item label="更新文案">
					<el-input v-model="addForm.updateContent"></el-input>
				</el-form-item>
				<el-form-item label="更新策略">
					<el-radio v-model="addForm.isForce" :label="false">推荐更新</el-radio>
					<el-radio v-model="addForm.isForce" :label="true">强制更新</el-radio>
				</el-form-item>
				<el-form-item label="更新方式">
					<el-radio v-model="addForm.updateType" label="yingyong">应用宝</el-radio>
					<el-radio v-model="addForm.updateType" label="online">在线更新</el-radio>
				</el-form-item>
				<el-form-item label="包链接">
					<el-input v-model="addForm.updateUrl"></el-input>
				</el-form-item>
				<el-form-item label="保存开启">
					<el-radio v-model="addForm.type" label="1">立即开启</el-radio>
					<el-radio v-model="addForm.type" label="0">暂不开启</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSub">确 定</el-button>
			</span>
		</el-dialog>
		
		<el-dialog
		  title="版本更新"
		  :visible.sync="editDialogVisible"
		  width="60%">
			<el-form ref="editFormRef" :model="editForm" label-width="110px">
				<el-form-item label="终端类型">
					<el-radio v-model="editForm.systemCode" label="android">Android</el-radio>
					<el-radio v-model="editForm.systemCode" label="ios">IOS</el-radio>
				</el-form-item>
				<el-form-item label="版本号">
					<el-input v-model="editForm.versionCode"></el-input>
				</el-form-item>
				<el-form-item label="更新文案">
					<!-- <quill-editor v-model="editForm.updateContent"></quill-editor> -->
					<el-input v-model="editForm.updateContent"></el-input>
				</el-form-item>
				<el-form-item label="更新策略">
					<el-radio v-model="editForm.isForce" :label="false">推荐更新</el-radio>
					<el-radio v-model="editForm.isForce" :label="true">强制更新</el-radio>
				</el-form-item>
				<el-form-item label="更新方式">
					<el-radio v-model="editForm.updateType" label="yingyong">应用宝</el-radio>
					<el-radio v-model="editForm.updateType" label="online">在线更新</el-radio>
				</el-form-item>
				<el-form-item label="包链接">
					<el-input v-model="editForm.updateUrl"></el-input>
				</el-form-item>
				<el-form-item label="保存开启">
					<el-radio v-model="editForm.type" label="1">立即开启</el-radio>
					<el-radio v-model="editForm.type" label="0">暂不开启</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="subEdit">确 定</el-button>
			</span>
		</el-dialog>
		
	</el-card>
  </div>
</template>

<script>
  export default{
    data(){
		return{
			opinionList:[],
			total:0,
			pageSize:20,
			pageCount:1,
			addDialogVisible:false,
			addForm:{},
			editForm:{},
			editDialogVisible:false
		}
	},
	created() {
		this.getList()
	},
	methods:{
		async getList(){
			const {data:res} = await this.$http.post('/version/list',{
				pageSize:this.pageSize,
				pageCount:this.pageCount
			})
			this.total = res.data.total
			this.opinionList = res.data.records
		},
		handleSizeChange(val) {
			// console.log(`每页 ${val} 条`);
			this.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			// console.log(`当前页: ${val}`);
			this.pageCount = val
			this.getList()
		},
		showAdd(){
			this.addForm={
				systemCode:'android',
				versionCode:'',
				updateContent:'',
				isForce:false,
				updateType:'yingyong',
				updateUrl:'',
				type:'0'
			}
			this.addDialogVisible = true
		},
		async typeChanged(info,id){
			const {data:res} = await this.$http.post('/version/updateType',{id:id,type:info.type})
			if(res.code!==200) {
				info.type = !info.type
				return this.$message.error('修改状态失败')
			}
			this.$message.success('修改状态成功')
			// console.log(info,id);
		},
		async showEdit(id){
			const {data:res} = await this.$http.post('/version/getVersionById',{id:id})
			// console.log(res);
			this.editForm = res.data
			this.editDialogVisible = true
		},
		async subEdit(){
			const {data:res} = await this.$http.post('/version/updateVersion',{
				isForce:this.editForm.isForce,
				systemCode:this.editForm.systemCode,
				type:this.editForm.type,
				updateContent:this.editForm.updateContent,
				updateType:this.editForm.updateType,
				updateUrl:this.editForm.updateUrl,
				versionCode:this.editForm.versionCode,
			})
			if(res.code!==200){
				return this.$message.error('修改失败')
			}
			this.$message.success('修改成功')
			this.editDialogVisible = false
			this.getList()
		},
		async addSub(){
			const {data:res} = await this.$http.post('/version/saveVersion',{
				isForce:this.addForm.isForce,
				systemCode:this.addForm.systemCode,
				type:this.addForm.type,
				updateContent:this.addForm.updateContent,
				updateType:this.addForm.updateType,
				updateUrl:this.addForm.updateUrl,
				versionCode:this.addForm.versionCode,
			})
			if(res.code!==200){
				return this.$message.error('增加失败')
			}
			this.$message.success('增加成功')
			this.addDialogVisible = false
			this.getList()
		}
	}
  }
</script>

<style lang="less" scoped>
	.el-card{
		margin-top: 10px;
	}
</style>
